<template>
	<view class="homepage">
		<!-- 前景图 -->
		<image class="background" mode="aspectFill" :src="pageConfig.pageBgUrl"></image>

		<!-- 页面内容 -->
		<view class="container">
			<!-- 顶部导航 -->
			<nav-bar class="nav-bar" :bgColor="isSticky?'#d5964d':''">
				<view slot="left" class="action">
					<!-- 日历 -->
					<navigator class="calendar" url="/pages/calendar/index">
						<text class="iconfont icon-rili"></text>
						<text class="date">{{nowDate}}</text>
					</navigator>
					<!-- 搜索 -->
					<navigator class="search" url="/pages/search/index">
						<text class="iconfont icon-sousuo"></text>
					</navigator>
				</view>
			</nav-bar>

			<!-- 用户信息 -->
			<view class="user">
				<!-- 微信和QQ -->
				<!-- #ifdef MP-WEIXIN || MP-QQ -->
				<open-data class="user-avatar" type="userAvatarUrl"></open-data>
				<!-- #endif -->
				<!-- 非微信QQ -->
				<!-- #ifndef MP-WEIXIN || MP-QQ -->
				<image class="user-avatar" :src="userInfo.avatarUrl"></image>
				<!-- #endif -->
				<view class="user-info">
					<view class="name">
						<!-- 微信和QQ -->
						<!-- #ifdef MP-WEIXIN || MP-QQ -->
						<open-data type="userNickName"></open-data>
						<!-- #endif -->
						<!-- 非微信QQ -->
						<!-- #ifndef MP-WEIXIN || MP-QQ -->
						{{userInfo.nickname}}
						<!-- #endif -->
					</view>
					<view class="exp">
						<text class="exp-key">修行值</text>
						<text class="exp-value">{{userInfo.exp| numberFormat}}</text>
					</view>
				</view>

				<!-- 修行天数&佛缘点 -->
				<view class="user-append">
					<image class="bg" :src="pageConfig.infoBgUrl"></image>
					<view class="box sign" v-if="userInfo.days">
						<view class="val">
							{{userInfo.days| numberFormat}}
						</view>
						<view class="key">
							修行天数
						</view>
					</view>
					<view class="box sign" v-else>
						<view class="btn" @click="signToday">
							签到
						</view>
					</view>
					<view class="line"></view>
					<view class="box coin">
						<view class="val">
							{{userInfo.coin| numberFormat}}
						</view>
						<view class="key">
							佛缘点
						</view>
					</view>
				</view>
			</view>

			<!-- 通知公告条 -->
			<view class="notification">
				<image class="bg" mode="scaleToFill" src="../static/images/bg-n-bar.png"></image>
				<!-- 文字滚动 -->
				<notice-bar style="position: relative;" v-if="noticeText" scrollable="true" showIcon="true"
					single="true" :speed="50" :text="noticeText"></notice-bar>
			</view>

			<!-- 功能宫格菜单 -->
			<view class="menu-grid">
				<!-- 佛堂 -->
				<navigator class="item bgc item-1" url="/pages/worship/index">
					<image class="bg" style="width:297rpx;height:278rpx;" :src="pageConfig.fotang"></image>
					<image class="txt" mode="aspectFit" style="left: 75rpx;top: 40rpx;"
						src="../static/images/home/txt_fo.png"></image>
				</navigator>
				<!-- 藏经 -->
				<navigator class="item bgc item-2" url="/pages/sutra/index">
					<image class="bg" style="width:145rpx;height:134rpx;" :src="pageConfig.zangjing"></image>
					<image class="txt" mode="aspectFit" style="left: 75rpx;top: 40rpx;"
						src="../static/images/home/txt_jing.png"></image>
				</navigator>
				<!-- 梵音 -->
				<navigator class="item bgc item-3" url="/pages/music/index">
					<image class="bg" style="width:153rpx;height:144rpx;" :src="pageConfig.fanyin"></image>
					<image class="txt" mode="aspectFit" style="left: 75rpx;top: 40rpx;"
						src="../static/images/home/txt_yin.png"></image>
				</navigator>
				<view class="item bgc item-4">
					<!-- 轮播图 Banner位 -->
					<swiper class="banner" :current="bannerCur" autoplay>
						<swiper-item v-for="(item,index) in bannerItems" :key="index">
							<navigator class="swiper" :url="item.jumpUrl">
								<image :src="item.imageUrl" mode="widthFix"></image>
							</navigator>
						</swiper-item>
					</swiper>
					<!-- 轮播指示点样式修改 -->
					<view class="dots" v-if="bannerItems.length>1">
						<block v-for="(item,index) in bannerItems" :key="index">
							<view class="dot" :class="index==bannerCur ? ' active' : ''">{{index+1}}</view>
						</block>
					</view>
				</view>
				<view class="item  item-5">
					<!-- 坐禅 -->
					<navigator class="bgc item-6" url="/pages/zazen/index">
						<image class="bg" style="width:91rpx;height:112rpx;" :src="pageConfig.chanzuo"></image>
						<image class="txt" style="left: 45rpx;top: 20rpx;" src="../static/images/home/txt_chan.png">
						</image>
					</navigator>
					<!-- 箴言 -->
					<navigator class="bgc item-7" url="/pages/proverbs/index">
						<image class="bg" style="width:130rpx;height:108rpx;" :src="pageConfig.zhenyan"></image>
						<image class="txt" mode="aspectFit" style="left: 35rpx;top: 20rpx;"
							src="../static/images/home/txt_yan.png">
						</image>
					</navigator>
					<!-- 抄经 -->
					<navigator class="bgc item-8" url="/pages/copy/index">
						<image class="bg" style="width:130rpx;height:139rpx;" :src="pageConfig.chaojing"></image>
						<image class="txt" mode="aspectFit" style="left: 35rpx;top: 20rpx;"
							src="../static/images/home/txt_xie.png">
						</image>
					</navigator>
				</view>
			</view>
			<!-- 金刚区 -->
			<view class="kongkim">
				<kong-kim :value="kongKimItems" :column="6" :row="1" @onKongKim="goToPage"></kong-kim>
			</view>
			<!-- 音乐播放器 -->
			<zaudio theme="theme1" :themeBgUrl="pageConfig.musicBgUrl"></zaudio>

			<!-- 页脚 - 回向 -->
			<view class="towards">
				<view><text class="iconfont icon-huawen-shang"></text></view>
				<view class="towards-txt">
					<text>愿以此功德。庄严佛净土。\n上报四重恩。下济三途苦。\n若有见闻者。悉发菩提心。\n尽此一报身。同生极乐国。</text>
				</view>
				<view><text class="iconfont icon-huawen-xia"></text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiUser from '@/common/api/user.js'
	import apiSys from '@/common/api/sys.js'
	export default {
		data() {
			return {
				isSticky: false,
				nowDate: new Date().getDate(),
				bannerCur: 0,
				bannerItems: [],
				noticeItems: [],
				kongKimItems: [],
				pageConfig: {},
				userInfo: {
					exp: 0,
					days: 0,
					coin: 0,
					nickname: '未知',
					avatarUrl: '',
				},
			};
		},
		onReady() {
			// 加载页面运营配置数据
			this.loadOppos()
		},
		onShow() {
			//实时渲染当前的播放状态
			this.$zaudio.syncRender()
			this.loadUserInfo()
		},
		onPageScroll(e) {
			//console.log("scroll", e.scrollTop)
			this.isSticky = e.scrollTop > 10
		},
		computed: {
			// 拼接通告条 滚动文字
			noticeText() {
				var data = this.noticeItems
				var len = data == null ? 0 : data.length
				if (len > 0) {
					var arr = []
					for (var i = 0; i < len; i++) {
						arr.push(data[i].title)
					}
					return arr.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
				}

				return null
			}
		},
		methods: {
			// 跳转页面
			goToPage(url) {
				// console.log(url)
				uni.navigateTo({
					url: url,
					fail(res) {
						console.log('跳转失败： ', res)
						uni.showToast({
							icon: 'none',
							title: '功能暂未开放',
							duration: 2000,
							position: 'center'
						})
					}
				})
			},
			// 获取用户信息
			loadUserInfo() {
				apiUser.infoDetails({}).then(res => {
					//赋值用户信息
					this.userInfo = {
						exp: res.info.val.exp,
						coin: res.info.val.coin,
						nickname: res.info.name,
						avatarUrl: res.info.avatarUrl,
						days: res.daily.QianDao ? res.info.std.QianDao : 0,
					}
				}).catch(err => {
					console.error(err)
				})
			},
			// 加载运营位
			loadOppos() {
				apiSys.oppos({
					module: "home",
					mode: "pagecfg,banner,notice,kongkim"
				}).then(res => {
					// 遍历页面配置信息
					if (res.pagecfg) {
						var arr = {};
						res.pagecfg.forEach(function(item, index) {
							arr[item.title] = item.imageUrl
						})
						// 页面配置
						this.pageConfig = arr
						// console.log(this.pageConfig)
					}
					// 轮播图
					this.bannerItems = res.banner
					// 金刚区
					this.kongKimItems = res.kongkim
					// 通告
					this.noticeItems = res.notice
				}).catch(err => {
					console.error(err)
				})
			},
			// 签到
			signToday() {
				apiUser.sign({}).then(res => {
					// 佛缘点
					uni.showToast({
						icon: 'none',
						title: "佛缘点 +" + res.coin.obtain + "\n 修行值 +" + res.exp.obtain,
						duration: 2000,
						position: 'bottom'
					})
					//刷新用户信息
					this.loadUserInfo()
				}).catch(err => {
					console.error(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.homepage {
		position: relative;
		width: 100vw;
		height: 100vh;

		// 前景图
		.background {
			width: 100vw;
			height: 100vh;
			position: fixed;
			opacity: 0.3;
		}

		// 页面内容
		.container {
			width: 100%;
			position: relative;

			// 导航条
			.nav-bar {

				.action {
					display: flex;

					// 日历
					.calendar {
						position: relative;
						display: flex;
						margin: 0 25rpx;
						align-items: center;
						justify-content: center;

						// 日期
						.date {
							position: absolute;
							top: 12rpx;
							color: #493129;
							font-size: 25rpx;
							font-weight: bold;
						}

						// 日历背景
						.icon-rili {
							color: #9D6D2B;
							font-size: 48rpx;
						}
					}

					//搜索
					.search {
						.icon-sousuo {
							color: #9D6D2B;
							font-size: 48rpx;
						}
					}

				}

			}

			// 用户
			.user {
				margin: 10rpx 25rpx;
				display: flex;

				// 头像
				&-avatar {
					width: 88rpx;
					height: 88rpx;
					border: 5rpx solid #E69B49;
					border-radius: 10rpx;
					background-color: #FBF4EA;
				}

				// 信息
				&-info {
					flex: 1;
					margin-left: 10rpx;

					// 昵称
					.name {
						font-size: 33rpx;
						font-weight: bold;
						color: #493129;
					}

					// 经验值
					.exp {
						margin-top: 5rpx;
						font-size: 23rpx;

						&-key {
							font-size: 24rpx;
							margin-right: 10rpx;
							color: #B68031;
						}

						&-value {
							font-size: 25rpx;
							font-weight: bold;
							color: #B68031;
						}
					}
				}

				&-append {
					position: relative;
					display: flex;
					align-items: center;

					width: 225rpx;
					height: 78rpx;
					border-radius: 10rpx;
					background: #E4AF72;
					color: #79470E;

					.bg {
						position: absolute;
						width: 100%;
						height: 100%;
					}

					.box {
						position: relative;
						display: flex;
						flex: 1;
						flex-direction: column;
						align-items: center;

						.val {
							font-size: 28rpx;
							font-weight: bold;
						}

						.key {
							font-size: 20rpx;
						}

					}

					@keyframes animated-border {
						0% {
							box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
						}

						100% {
							box-shadow: 0 0 0 58rpx rgba(255, 255, 255, 0);
						}
					}

					.sign {
						.btn {
							animation: animated-border 1.5s infinite;
							font-size: 28rpx;
							font-weight: bold;
							line-height: 58rpx;
							border-radius: 50%;
						}
					}

					.line {
						width: 5rpx;
						height: 50rpx;
						background-color: #FBF4EA;
						border-radius: 3rpx;
					}

					.sign {}

					.coin {}
				}


			}

			// 通知条
			.notification {
				position: relative;
				height: 22px;
				margin: 25rpx 0rpx;

				.bg {
					width: 100%;
					padding: 0rpx 20rpx;
					height: 22px;
					position: absolute;
				}
			}

			// 宫格菜单
			.menu-grid {
				margin: 25rpx;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 180rpx 180rpx 178rpx;
				grid-auto-rows: 150rpx;
				grid-gap: 25rpx;

				.bgc {
					overflow: hidden !important;
					border-radius: 15rpx;
					position: relative;
					//background-color: #eeddce;
					// background-color: #FBF4EA;
					background: linear-gradient(to right bottom, #FBF4EA, #EEDDCE);
					border: 3rpx solid #eeddce;
				}

				.item {

					.bg {
						position: absolute;
						bottom: 0;
						right: 0;
					}

					.txt {
						position: absolute;
						width: 47rpx;
						height: 121rpx;
					}
				}

				.item-1 {
					grid-row: 1 / span 2;
				}

				.item-4 {
					grid-column: 1 / span 2;
					position: relative;

					.banner {
						height: 100%;
						position: relative;
						border-radius: 15rpx;

						// overflow: hidden !important;
						.swiper image {
							width: 100%;
							height: 100%;
						}
					}

					.dots {
						position: absolute;
						bottom: 20rpx;
						right: 50rpx;
						z-index: 99;
						display: flex;
						flex-direction: row;
						justify-content: center;

						font-size: 18rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: bold;

						.dot {
							width: 28rpx;
							height: 28rpx;
							border-radius: 24rpx;
							margin-right: 10rpx;
							color: #fff;
							background: rgba(0, 0, 0, .3);

						}

						.active {
							color: #000;
							background: rgba(255, 255, 255, .8);
						}
					}
				}

				.item-5 {
					grid-column: 1 / span 2;
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					grid-auto-rows: 150rpx;
					grid-gap: 25rpx;
				}

			}


			// 金刚区
			.kongkim {
				display: block;
				padding: 20rpx 0rpx;
				border-radius: 18rpx;
				background: linear-gradient(to right, #FFC5A1, #E4B880);
				margin: 50rpx 25rpx 20rpx 25rpx;
			}
		}
	}
</style>
